<!--
   Copyright 2020-2021 the original author or authors.

   Licensed under the General Public License, Version 3.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

        https://www.gnu.org/licenses/gpl-3.0.en.html
 -->

<template>
  <div class="container">
    <!-- 轮播图 -->
    <Carousel style="margin-left: 20%;width: 60%"
        v-model="carouselSettings.value"
        :autoplay="carouselSettings.autoplay"
        :autoplay-speed="carouselSettings.autoplaySpeed"
        :dots="carouselSettings.dots"
        :radius-dot="carouselSettings.radiusDot"
        :trigger="carouselSettings.trigger"
        :arrow="carouselSettings.arrow">
        <CarouselItem v-for="img in carouselImgs" :key="img">
          <div class="demo-carousel"><img :src="img" alt=""></div>
        </CarouselItem>
    </Carousel>
<!--    <div class="main main-card">-->
<!--      <Card title="Announcements" icon="ios-alert-outline" dis-hover :padding="10">-->
<!--          <div style="margin: 0 10px">-->
<!--            <Row class="announce-subtitle">-->
<!--              <Col span="18">Title</Col>-->
<!--              <Col span="6">Time</Col>-->
<!--            </Row>-->
<!--            <Row class="announce-item" v-for="item in announcements" :key="item.url">-->
<!--              <Col span="18">{{ item.title }}</Col>-->
<!--              <Col span="6">{{ item.time }}</Col>-->
<!--            </Row>-->
<!--          </div>-->
<!--        </Card>-->
<!--      <Card dis-hover title="Search" icon="ios-search">-->
<!--        <template>-->
<!--          <div class="global-search">-->
<!--            <Input style="width: 100%; display: block;" type="text" autocomplete="off" placeholder="ID" />-->
<!--          </div>-->
<!--        </template>-->
<!--      </Card>-->
<!--    </div>-->
  </div>
</template>

<script>

export default {
  data: function() {
    return {
      carouselSettings: {
        value: 0,
        autoplay: true,
        autoplaySpeed: 10000,
        dots: 'inside',
        radiusDot: false,
        trigger: 'click',
        arrow: 'hover'
      },
      carouselImgs: [
        // test imgs
        'https://guli-1212.oss-cn-beijing.aliyuncs.com/2021/08/27/qODfRLEdnvBl6600dc001846880da01f70eb45694158.jpg8871bac5e1df4ace8dab8e7061d0e117',
        'https://pic.leetcode-cn.com/1631075628-xCrVIR-%E6%BB%91%E5%8A%A8%E7%AA%97%E5%8F%A3%E5%92%8C%E5%8F%8C%E6%8C%87%E9%92%88.jpg?x-oss-process=image%2Fformat%2Cwebp'
      ],
      announcements: [
        { title: 'ZZUOJ于2021年9月27日开始第一次比赛测试', time: '2021-09-27', url: '1' }
      ]
    }
  }
};
</script>

<style lang="less" scoped>
@media screen and ( max-width: 1000px ){
  .main {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    > div {
      width: 100%;
      max-width: 800px;
      min-width: 0;
    }
  }
}

.demo-carousel {
  width: 100%;
  min-height: 300px;
  img {
    object-fit: cover;
    width: 100%;
    max-height: 300px;
  }
}

.main {
  margin: -140px auto 100px;
  > div {
    min-width: 49%;
    margin-bottom: 20px;
  }
}

.announce-subtitle {
  height: 30px;
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-align: center;
}
.announce-item {
  height: 40px;
  color: #2D7ABA;
  border-top: 1px solid #d4d4d5;
  display: -webkit-box;
  -webkit-box-align: center;
  :hover {
    cursor: pointer;
  }
}

.global-search {
  // margin-top: 10px;
  height: 30px;
  /deep/ .ivu-input {
    border-radius: 10px;
  }
}

</style>
